
import React, { Component } from 'react'
import './css/02-table-swich.css';
import Firm from './maizuocomponent2/Firm'
import Cinema from './maizuocomponent2/Cinema'
import Center from './maizuocomponent2/Center'
import Tabbar from './maizuocomponent2/Tabbar'
import Navbar from './maizuocomponent2/Navbar'

export default class App extends Component {

  state = {
    list:[
      {
        id: 1,
        text: "电影" 
      },
      {
        id: 2, 
        text: "影院"
      },
      {
        id: 3,
        text: "我的"
      }
    ],
    current: 0
  }

  render() {
    return (
      <div>
        <Navbar myevent={() => {
          console.log("navbar-center", "告诉tabbar去切换到center组件，高亮？");
          this.setState({ 
            current:2
          })
          // 不好搞。。。
        }} />
        {
          this.state.current === 0 && <Firm></Firm>
        }
        {
          this.state.current === 1 && <Cinema></Cinema>
        }
        {
          this.state.current === 2 && <Center></Center>
        }
        
        {/* <ul>
          {
            this.state.list.map(
              (item,index)=> <li key={item.id} className={this.state.current === index ? 'active' : ''} onClick= {() => {
                this.handleClick(index)
              }}>{item.text}</li>)
          }
        </ul> */}

        <Tabbar myevent = {
          (index) => {
          console.log("父组件定义，", index)
          this.setState({
            current: index
          })
        }} current = {this.state.current} list = {this.state.list}/>

      </div>
    )
  }

  handleClick = (index) =>{
    this.setState({
      current: index
    })
  }
}
